<template>
  <el-row>
    <el-form-item :label="itemCfg.label" :prop="itemCfg.name" v-if=" itemCfg.type==='input'" >
      <el-input v-model="saveData[itemCfg.name] " :placeholder="itemCfg.placeholder" show-word-limit></el-input>
    </el-form-item>
    <el-form-item   :label="itemCfg.label" :prop="itemCfg.name"  v-if="itemCfg.type==='cascader'" >
      <el-cascader  :placeholder="itemCfg.placeholder" :options="itemCfg.other.treeData" :props="itemCfg.other.cascadeProps"  :show-all-levels="false"v-model="saveData[itemCfg.name] " clearable  ref="cascader" :style="itemWidth" ></el-cascader>
    </el-form-item>
    <el-form-item :label="itemCfg.label" :prop="itemCfg.name"  v-if="itemCfg.type==='select'">
      <el-select v-model="saveData[itemCfg.name] " :placeholder="itemCfg.placeholder" >
        <el-option v-for="a in itemCfg.other.selectData" :key="a.value" :label="a.label" :value="a.value" />
      </el-select>
    </el-form-item>
    <el-form-item :label="itemCfg.label" :prop="itemCfg.name"  v-if="itemCfg.type==='select2'">
      <el-select v-model="saveData[itemCfg.name] " :placeholder="itemCfg.placeholder" multiple>
        <el-option v-for="a in itemCfg.other.selectData" :key="a.value" :label="a.label" :value="a.value" />
      </el-select>
    </el-form-item>
    <el-form-item :label="itemCfg.label" :prop="itemCfg.name"  v-if="itemCfg.type==='inputNumber'">
        <el-input-number v-model="saveData[itemCfg.name]"  :min="1" :max="10" label="描述文字"></el-input-number><span style="margin-left: 20px">{{itemCfg.other.remark}}</span>
    </el-form-item>
  </el-row>

</template>

<script>
	export default {
		name:'SaveItem',
		props:['itemCfg','saveData','width'],
		methods: {
		},
    data(){
		  return{
        treeData: [],
       itemWidth:'',
        cascadeProps:{
          value: "departmentId",
          label: "name",
          children: "children",
          emitPath:false,
          checkStrictly: true
        },
      }
    },
    mounted() {
    },

  }
</script>

<style scoped>

</style>
